<script>
import { login } from 'services/x-start/mgr/user'
import urlJoin from 'url-join'
import qs from 'qs'
export default {
  data() {
    return {
      loginInfo: { user_name: '', user_pass: '' },
    }
  },
  created() {},
  methods: {
    send() {
      login(this.loginInfo).then(
        res => {
          this.$go('/wms/home')
        },
        ({ payload }) => {
          this.$message.error(payload && payload.msg)
        }
      )
    },
  },
}
</script>

<template lang="pug">
.login
  .box
    .title 
      p.ch 智慧体育客流分析系统
      p.en PASSENGER FLOW ANALYSIS SYSTEM OF INTELIGENT SPORTS
    .form
      .label.first
        input( placeholder="用户名 / USENAME" v-model="loginInfo.username" autocomplete="off")
      .label
        input( placeholder="密   码 / PASSWORD" type="password" v-model="loginInfo.password"  @keyup.enter="send" autocomplete="off")
      .label
        button(@click="send" type="submit") 登   录 / SIGN UP
</template>

<style lang="stylus" scoped>
.login
  height 100vh
  background linear-gradient(#444, #282828)
  display flex
  justify-content center
  align-items center
  .box
    width 100%
    color #fff
    padding 25vh 0
    background #BFCEDC
    .title
      text-align center
      // margin-top -20px
      width 100%
      padding-bottom 20px
      .ch
        font-size 50px
      .en
        font-size 16px
        margin-top 15px
  .form
    // height 305px
    // background rgba(255, 255, 255, 0.18)
    text-align center
    border-radius 8px
    border 1px solid transparent
    .label
      padding 10px 0
      margin 4px 0
    button
      height 40px
      width 400px
      outline none
      border none
      color #e0e9f2
      font-size 14px
      background #1a293c
    .first
      margin-top 60px
    input
      height 35px
      color #353f63
      width 400px
      text-indent 15px
      background #E0E9F2
      border 1px solid #fff
      box-shadow 0px 0px 2px 0px rgba(53, 63, 99, 0.24)
      outline none
      transition 0.1s
      &:hover
        border-color rgba(255, 255, 255, 0.5)
      &:focus
        border-color #ff6d60
input::-webkit-input-placeholder /* WebKit browsers */
  color #353f63
input:-moz-placeholder /* Mozilla Firefox 4 to 18 */
  color #353f63
input::-moz-placeholder /* Mozilla Firefox 19+ */
  color #353f63
input:-ms-input-placeholder /* Internet Explorer 10+ */
  color #353f63
@media screen and (max-width: 650px)
  .login
    .box
      width 320px
      padding 5vh 0
      .form
        input, button
          width initial
      .title
        .ch
          font-size 25px
        .en
          font-size 12px
</style>
